<template>
  <div class="personal-center">
    <main-header></main-header>
    <div class="wrap">
      <div id="banner" class="f-sb-c">
        <div class="f-fs-c">
          <el-avatar
            :size="120"
            :src="require('@/public/img/defaultAvatar.gif')"
          ></el-avatar>
          <div class="info">
            <div class="nickname"><b>用户昵称</b></div>
            <div class="wealth f-fs-c">
              <el-popover placement="bottom" trigger="hover">
                <div>
                  购物消费即可获得金币。<br />消费1元可兑换1金币；<br />100金币可兑换1元红包；<br />购物后评价一次可领取100金币。
                </div>
                <div slot="reference" class="f-c-c-c">
                  <b>0</b>
                  <span>金币</span>
                </div>
              </el-popover>
              <div class="f-c-c-c">
                <el-popover placement="bottom" trigger="hover">
                  <div>
                    <voucher v-for="(item, ind) in 6" :key="ind"></voucher>
                  </div>
                  <div slot="reference" class="f-c-c-c">
                    <b>0</b>
                    <span>优惠券</span>
                  </div>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <el-button type="primary" size="mini" @click="goMyInfo"
            >查看/编辑资料</el-button
          >
        </div>
      </div>
      <div id="cont" class="f-sb-fs">
        <shop-cart id="cart"></shop-cart>
        <deal-status id="deal"></deal-status>
      </div>
    </div>
    <el-drawer
      title="我的资料"
      :visible.sync="isShowDrawer"
      direction="rtl"
      :before-close="beforeCloseDrawer"
    >
      <user-info></user-info>
    </el-drawer>
  </div>
</template>
<script>
import DealStatus from "../components/section/DealStatus.vue";
import MainHeader from "../components/section/MainHeader.vue";
import ShopCart from "../components/section/ShopCart.vue";
import UserInfo from "../components/section/UserInfo.vue";
import Voucher from "../components/side/Voucher.vue";
export default {
  name: "personalCenter",
  components: {
    MainHeader,
    Voucher,
    ShopCart,
    DealStatus,
    UserInfo,
  },
  data() {
    return {
      isShowDrawer: false,
    };
  },
  methods: {
    goMyInfo() {
      this.isShowDrawer = true;
    },
    beforeCloseDrawer(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
#banner {
  height: 160px;
  padding: 0 30px;
  border-radius: 0 0 $border-radius-base $border-radius-base;
  background: $background-color-darker;
  .el-avatar {
    margin-right: 50px;
  }
  .nickname {
    margin-bottom: 20px;
    font: {
      size: 24px;
    }
  }
  .wealth {
    div:first-child {
      margin-right: 250px;
    }
    b {
      color: $theme-color;
      font: {
        size: 30px;
      }
    }
    span {
      color: $color-text-secondary;
    }
  }
  .btns {
    height: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    align-items: flex-start;
  }
}
.voucher {
  margin: 10px;
}
#cont {
  margin: 30px 0;
}
</style>